<!DOCTYPE html>
<html>
<head>
    <meta name="layout" content="main" />
    <g:set var="entityName" value="${message(code: 'loginHistory.label', default: 'LoginHistory')}" />
    <title>预警监测</title>
    <asset:javascript src="echarts/echarts-all-3.js" />
    <asset:stylesheet src="styles/css/analy.css" />
    <style>
    .sub_title{
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
    }
    .chart_container{
        width:100%;
        height:100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    </style>
</head>
<body>
<div class="small-header">
    <div class="hpanel">
        <div class="panel-body">
            <div id="hbreadcrumb" class="pull-right">
                <ol class="hbreadcrumb breadcrumb">
                    <li>CINDATA PLS</li>
                    <li class="active">
                        <span>预警监测</span>
                    </li>
                </ol>
            </div>

            <h2 class="font-light m-b-xs">
                预警监测
            </h2>
        </div>
    </div>
</div>
%{--content--}%
<div class="content animate-panel" ng-controller="riskWarningAnalyzeCtrl">
    <div ng-repeat="ck in chartKindArr" after-render="drawAllChart()">
        <h3>{{ck.name}}</h3>
        <div class="row">
            <div class="col-lg-4" ng-repeat="c in ck.chartArr">
                <div class="hpanel">
                    <div class="panel-header" ng-click="goWaringList(c)">{{c.title}}</div>
                    <div class="panel-body text-center h-200">
                        <div style="width:100%;height:200px;">
                            <div id="{{c.controlId}}" class="chart_container">

                            </div>
                        </div>
                    </div>
                    <div class="panel-footer">{{c.description}}</div>
                </div>
            </div>
        </div>
    </div>
</div>
    <script language="JavaScript" type="text/javascript">
        window.app.controller("riskWarningAnalyzeCtrl",function($scope,$timeout,$uibModal){
            $scope.chartType = {
                '折线图':{
                    option:{
                        tooltip : {
                            trigger: 'axis',
                            axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                                type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                            }
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            top: '3%',
                            bottom: '3%',
                            containLabel: true
                        },
                        xAxis: {
                            type: 'category',
                            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [{
                            data: [820, 932, 901, 934, 1290, 1330, 1320],
                            type: 'line'
                        }]
                    },
                    makeOptionWithData:function(opt,data){
                        var x_data = data.map(function(item){
                            return item.key;
                        });
                        var y_data = data.map(function(item){
                            return item.value;
                        });
                        opt.xAxis.data = x_data;
                        opt.series[0].data = y_data;
                        return opt;
                    }
                },
                '柱状图':{
                    option:{
                        tooltip : {
                            trigger: 'axis',
                            axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                                type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                            }
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            top: '3%',
                            bottom: '3%',
                            containLabel: true
                        },
                        xAxis : [
                            {
                                type : 'category',
                                data : ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                            }
                        ],
                        yAxis : [
                            {
                                type : 'value'
                            }
                        ],
                        series : [
                            {
                                type:'bar',
                                barWidth: '60%',
                                data:[10, 52, 200, 334, 390, 330, 220]
                            }
                        ]
                    },
                    makeOptionWithData:function(opt,data){
                        var x_data = data.map(function(item){
                            return item.key;
                        });
                        var y_data = data.map(function(item){
                            return item.value;
                        });
                        opt.xAxis[0].data = x_data;
                        opt.series[0].data = y_data;
                        return opt;
                    }
                },
                '饼状图':{
                    option:{
                        grid: {
                            left: '3%',
                            right: '4%',
                            top: '3%',
                            bottom: '3%',
                            containLabel: true
                        },
                        tooltip : {
                            trigger: 'item',
                            formatter: "{b} : {c} ({d}%)"
                        },
                        series : [
                            {
                                type: 'pie',
                                radius : '65%',
                                center: ['50%', '50%'],
                                data: [
                                    {value:335, name:'赵'},
                                    {value:310, name:'钱'},
                                    {value:274, name:'孙'},
                                    {value:235, name:'李'}
                                ],
                                itemStyle: {
                                    emphasis: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                }
                            }
                        ]
                    },
                    makeOptionWithData:function(opt,data){
                        var c_data = data.map(function(item){
                            return {name:item.key,value:item.value};
                        });
                        opt.series[0].data = c_data;
                        return opt;
                    }
                }
            };
            $scope.chartKindArr = [
                // {
                //     id:1,
                //     name:"监测",
                //     chartArr:[
                //         {title:"111",type:"line",controlId:"1",chartData:{}},
                //         {title:"222",type:"bar",controlId:"2",chartData:{}},
                //         {title:"333",type:"line",controlId:"3",chartData:{}}
                //     ]},
                // {
                //     id:2,
                //     name:"预警",
                //     chartArr:[
                //         {title:"444",type:"bar",controlId:"4",chartData:{}},
                //         {title:"555",type:"line",controlId:"5",chartData:{}},
                //         {title:"666",type:"bar",controlId:"6",chartData:{}},
                //         {title:"777",type:"pie",controlId:"7",chartData:{}}
                //     ]
                // }
            ];
            $scope.loadChartArr = function(){
                $.ajax({
                    url: '/riskWarningConfig/warningConfigList',
                    type: 'GET',
                    data: {},
                    success: function (data) {
                        // if (data.status != "success") {
                        //     return;
                        // }
                        $scope.disposeChartArrData(data.result);
                    }
                });
            };
            $scope.disposeChartArrData = function(data){
                var tmpChartKindArr = [];
                var typeArr = [];
                data.forEach(function(item){
                    if(typeArr.indexOf(item.type)==-1){
                        typeArr.push(item.type);
                    }
                });
                typeArr.forEach(function(item,index){
                    tmpChartKindArr.push({id:index,name:item,chartArr:[]});
                });
                tmpChartKindArr.forEach(function(item){
                    var chartArr = data.filter(function(citem){
                        return (citem.type == item.name);
                    });
                    chartArr.forEach(function(citem){
                        console.log(citem);
                        item.chartArr.push({
                            id: citem.id,
                            title: citem.name,
                            description: citem.chartDescription,
                            type: citem.chartType,
                            sequence: citem.chartSequence,
                            duration: citem.duration,
                            controlId: citem.id,
                            chartData: null,
                            sourceAction: citem.sourceAction,
                            warningType: citem.warningType.id
                        });
                    });
                    item.chartArr = item.chartArr.sort(function(a,b){
                        return a.sequence - b.sequence;
                    });
                });
                $timeout(function(){
                    $scope.chartKindArr = tmpChartKindArr;
                },0);
            };
            $scope.drawAllChart = function(){
                $scope.chartKindArr.forEach(function(ck){
                    ck.chartArr.forEach(function(c){
                        $scope.loadChartData(c.id,function(data){
                            if(data.length == 0){
                                $("#"+c.id).html("当前图表没有数据，无法显示");
                            }
                            else{
                                $("#"+c.id).html("");
                                var sortData = data.sort(function(a,b){
                                    return a.ordervalue - b.ordervalue;
                                });
                                c.chartData = sortData;
                                $scope.drawOneChart(c);
                            }
                        });
                    });
                });
            };
            $scope.drawOneChart = function(chartObj){
                var chart = echarts.init(document.getElementById(chartObj.controlId));
                var curChartType = $scope.chartType[chartObj.type];
                if(!curChartType){
                    console.log("不支持当前图表类型，"+chartObj.type);
                    return;
                }
                var option = curChartType.makeOptionWithData(curChartType.option,chartObj.chartData);
                chart.setOption(option);
                window.onresize = function () {
                    chart.resize();
                };
            };
            $scope.loadChartData = function(riskWaringConfigId,callback){
                $.ajax({
                    url: '/riskWarningConfig/getChartData',
                    type: 'GET',
                    data: {
                        id: riskWaringConfigId
                    },
                    success: function (data) {
                        if (callback) {
                            callback(data.result);
                        }
                    }
                });
            };
            $scope.goWaringList = function(chart){
                if(chart.sourceAction == null){
                    swal("当前图表不存在查询链接，无法跳转");
                    return;
                }
                // location.href = chart.sourceAction;
                location.href = chart.sourceAction + '?warningType=' + chart.warningType;
            };
            $scope.init = function(){
                $scope.loadChartArr();
            };
            $scope.init();
        });
    </script>
</body>
</html>
